<template>
  <div class="Echarts">
    <div class="date-picker-container">
      <el-date-picker
        v-model="startTime"
        type="date"
        placeholder="选择日期起始时间"
        class="date-picker"
      >
      </el-date-picker>
      <el-date-picker
        v-model="endTime"
        type="date"
        class="date-picker"
        placeholder="选择日期结束时间"
      >
      </el-date-picker>
      <el-button
        icon="el-icon-search"
        circle="true"
        @click="initData"
      ></el-button>
    </div>
    <div id="chart1" style="width: 40vw; height: 400px" class="chart"></div>
    <div id="chart2" style="width: 40vw; height: 400px" class="chart"></div>
  </div>
</template>

<script>
import { GetVisitCount, GetVisitType } from '@/api/visit';

export default {
  name: 'visitAnalysis',
  data () {
    return {
      xAxisData: [],
      seriesData: [],
      startTime: '',
      endTime: ''
    }
  },
  methods: {
    myEcharts1 (seriesData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('chart1'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '站点访问量分析'
        },
        color: ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          data: []
        },

        series: [
          {
            name: '访问量',
            type: 'pie',
            radius: ['50%', '70%'],
            data: seriesData,
            label: {
              formatter: '{b} : {c} ({d}%)',



            },
          }]
      };
      myChart.setOption(option);
    },
    myEcharts2 (seriesData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('chart2'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '站点访问类型分析'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#60acfc', '#32d3eb', '#5bc49f', '#feb64d', '#ff7c7c', '#9287e7'],
        legend: {
          data: []
        },

        series: [
          {
            name: '访问量',
            type: 'pie',
            radius: ['50%', '70%'],
            data: seriesData,
            label: {
              formatter: '{b} : {c} ({d}%)',
            },
          }]
      };
      myChart.setOption(option);
    },
    initData () {
      GetVisitCount(this.startTime, this.endTime).then((response) => {
        this.myEcharts1(response.data);
      });
      GetVisitType(this.startTime, this.endTime).then((response) => {
        this.myEcharts2(response.data);
      });
    }

  },
  mounted () {
    this.initData();

  }
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
.chart {
  width: 49%;
  display: inline-block;
}
.date-picker {
  margin-right: 30px;
}
.date-picker-container {
  margin-bottom: 50px;
}
</style>